@use 'sass:math';
@use '../tp';

.#{tp.$prefix}-txtv {
	position: relative;

	&_i {
		@extend %tp-input;

		padding-left: tp.cssVar('blade-h-padding');
		padding-right: tp.cssVar('blade-h-padding');
	}
	&#{&}-fst &_i {
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
	}
	&#{&}-mid &_i {
		border-radius: 0;
	}
	&#{&}-lst &_i {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}
}

// number-text
.#{tp.$prefix}-txtv {
	$knob-bounds-width: 12px;
	$knob-visual-width: 2px;

	&#{&}-num &_i {
		text-align: right;
	}
	&#{&}-drg &_i {
		opacity: 0.3;
	}
	&_k {
		cursor: pointer;
		height: 100%;
		left: calc(
			#{tp.cssVar('blade-h-padding')} - #{math.div(
					$knob-bounds-width - $knob-visual-width,
					2
				)}
		);
		position: absolute;
		top: 0;
		width: $knob-bounds-width;

		&::before {
			background-color: tp.cssVar('input-fg');
			border-radius: math.div($knob-visual-width, 2);
			bottom: 0;
			content: '';
			height: calc(#{tp.cssVar('container-unit-size')} - 4px);
			left: 50%;
			margin-bottom: auto;
			margin-left: math.div(-$knob-visual-width, 2);
			margin-top: auto;
			opacity: 0.1;
			position: absolute;
			top: 0;
			transition: border-radius 0.1s, height 0.1s, transform 0.1s, width 0.1s;
			width: $knob-visual-width;
		}
	}
	&_k:hover::before,
	&#{&}-drg &_k::before {
		opacity: 1;
	}
	&#{&}-drg &_k::before {
		border-radius: 50%;
		height: 4px;
		transform: translateX(math.div($knob-visual-width - 4px, 2));
		width: 4px;
	}
	&_g {
		bottom: 0;
		display: block;
		height: 8px;
		left: 50%;
		margin: auto;
		overflow: visible;
		pointer-events: none;
		position: absolute;
		top: 0;
		visibility: hidden;
		width: 100%;
	}
	&#{&}-drg &_g {
		visibility: visible;
	}
	&_gb {
		fill: none;
		stroke: tp.cssVar('input-fg');
		stroke-dasharray: 1;
	}
	&_gh {
		fill: none;
		stroke: tp.cssVar('input-fg');
	}

	.#{tp.$prefix}-ttv {
		margin-left: math.div($knob-bounds-width, 2);
		visibility: hidden;
	}
	&#{&}-drg .#{tp.$prefix}-ttv {
		visibility: visible;
	}
}
